<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <!-- 移动设备支持 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/shopcartstatic/css/public.css" charset="utf-8 "/>

    <link href="${ctxStatic}/shopcartstatic/css/mall.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${ctxStatic}/shopcartstatic/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/shopcartstatic/js/jquery.Spinner.js"></script>

	<style>

		.comment-news {
			/*position: fixed;*/
			/*top: 180px;*/
			/*left: 12px;*/
			background-color: #f9f2e3;
			width: 90%;
			height: 90px;
			border-radius: 15px;
			margin-left: 15px;
			margin-top: 10px;
		}

		.comment-info {
			width: 10%;
			font-size: 12px;
			color: #666;
			margin-left: 5px;
		}

		input.comment-content {
			width: 85%;
			height: 30px;
			border-radius: 5px;
			border: 1px solid #999;
			margin-top: 5px;
			margin-left: 22px;
		}

		.comment-button {
			width: 50px;
			height: 25px;
			background-color: orangered;
			border-radius: 15px;
			border: 0;
			margin-top: 5px;
			margin-left: 290px;
		}
	</style>
</head>

<body class="body_color">
<div class="tip-info" style="display:none;"><span id="loginError"></span></div>
<div class="mall_main">
    <div id="child_header">
        <div class="goback"><a href="javascript:history.back(-1)"><i></i></a></div>
        <div class="current_location"><span>商品详情</span></div>
    </div>

    <div id="banner_box" class="box_swipe">
        <ul>
            <c:forEach items="${product.imgList}" var="img">
                <li><img src="${img}"></li>
            </c:forEach>

        </ul>
        <ol>
            <li class="on"></li>&nbsp;
            <li></li>&nbsp;
            <li></li>&nbsp;
            <li></li>&nbsp;
        </ol>
    </div>
    <div class="des_goods">
        <p>${product.name} </p>
        <p><span class="sp_style1">${product.keyword}</span><em class="em_integral"></em></p>
        <p><span class="pr">价格</span><span class="sp_style3">¥${product.price}</span></p>
        <hr/>
        <div class="goods_activity">
            <p><span class="pr">备注</span><a href=""><span class="sp_style3">${product.remarks}</span></a></p>
            <div class="num">
                <span>数量</span>
                <span id="a" class="Spinner"></span>
                <input type="hidden" id="goodsid" value="${product.id}">
                <span>库存${product.stock}个</span>
            </div>
            <p><span class="pr">服务承诺</span><span>7天无理由退货 正品保证</span></p>
            <p class="pay_type"><span class="pr">支付类别</span><span><i class="pay03"></i>微信支付</span></p>
        </div>
    </div>

	<div class="box_list">
		<ul class="box_nav">
			<li class="current"><a>商品详情</a></li>
			<li><a>评论(${size})</a></li>

		</ul>
		<div class="goods_box">
			<%--<img src="${ctxStatic}/shopcartstatic/images/1.jpg" width="100%">
			<img src="${ctxStatic}/shopcartstatic/images/2.jpg" width="100%">
			<img src="${ctxStatic}/shopcartstatic/images/3.jpg" width="100%">
			<img src="${ctxStatic}/shopcartstatic/images/4.jpg" width="100%">--%>

				<h3>详情描述：</h3>
                <p class="evaluate" id="productDetail">
                    ${product.detalls}
                </p>
		<div class="goods_box" style="display: none">

            <h3>累计评价(${size})：</h3>
			<div class="evaluate">
                <c:forEach var="comments" items="${comments}">
				<span>${comments.user.name}</span><span class="text_t"><fmt:formatDate value="${comments.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
				<p>${fns:abbr(comments.content,100)}</p>
				<hr/>
				</c:forEach>
			</div>

			<div class="replace-content">
				<form id="inputForm" modelAttribute="reply" action="addcomments" method="post">
					<input type="hidden" name="userId" value="${fns:getUser().id}">
					<input type="hidden" name="product.id" value="${product.id}">
					<div class="comment-news ">
						<span class="comment-info">编辑评论：</span>
						<input type="text" class="comment-content" id="content" name="content">
						<%--<button class="comment-button">确定</button>--%>
						<input type="submit" value="确定" class="comment-button">
					</div>
				</form>
			</div>

		</div>
		<div class="goods_box" style="display: none">
			<div class="ask_list">
				<textarea></textarea>
				<input class="btn_remove" type="button" value="提交"/>
			</div>
		</div>
	</div>
	<div class="bottomdiv clearfix">
		<div class="inner clearfix">
			<div class="fl btn_sure">
				<a href="">立即购买</a>
			</div>
			<div class="fl btn_buy_detail">
				<a class="addshop_cat" href="cartadd?productid=${product.id}">加入购物车</a>
			</div>
		</div>

        </div>
    </div>
</div>

<script src="${ctxStatic}/shopcartstatic/js/swipe2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        new Swipe(document.getElementById('banner_box'), {
            speed: 500,
            auto: 3000,
            callback: function () {
                var lis = $(this.element).next("ol").children();
                lis.removeClass("on").eq(this.index).addClass("on");
            }
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        $(".spec_select ul li em").click(function () {
            $(this).addClass("click").siblings().removeClass("click");
        })
    })
</script>
<!--商品数量加减-->
<script type="text/javascript">
    var incount =${product.stock};
    $(function () {
        $("#a").Spinner({value: 1, min: 0, len: 3, max: incount});
    });


    var $message = '${message}';
    if ($message != null && $message != '') {
        $(".tip-info").show();
        setTimeout(function () {
            $(".tip-info").hide();
        }, 3000);
    }

    function addcart(id) {
        var num = $(".Amount").val();
        if (num == 0) {
            $("#loginError").html("请选择购买数量");
            $(".tip-info").show();
            setTimeout(function () {
                $(".tip-info").hide();
            }, 3000);
        } else {
            $.ajax({
                type: "post",
                url: "cartadd",
                data: "id=" + id + "&num=" + num,
                success: function (aa) {

                    if (aa.status == "0") {
                        $("#loginError").html("亲，已经添加到购物车了哦");
                        $(".tip-info").show();
                        setTimeout(function () {
                            $(".tip-info").hide();
                        }, 3000);
                    }else if (aa.status == "2"){
                        window.location.href="/shop/client/login";
                    }else if(aa.status == "1"){
                        $("#loginError").html("亲，系统出现故障，请联系管理员");
                        $(".tip-info").show();
                        setTimeout(function () {
                            $(".tip-info").hide();
                        }, 3000);
                    }
                }
            })
        }
    }


</script>
<script type="text/javascript">
    jQuery(function ($) {
        $('.box_list ul li').click(function () {
            var index = $('.box_list ul li').index(this);
            $(this).addClass('current').siblings('li').removeClass('current');
            $('.box_list .goods_box:eq(' + index + ')').show().siblings('.goods_box').hide();
        })
    })
</script>

<script type="text/javascript">

    $("#ljgm").click(function () {
        var goodsnum = $(".Amount").val();
        var goodsid = $("#goodsid").val();
        window.location.href="ljgm?goodsnum=" + goodsnum + "&goodsid=" + goodsid;
    })

</script>

</div>
</body>
</html>